﻿(function (){
	window.initLevelPage = function (app, position, size) {
		var g = new Kinetic.Layer();
		var basePoint = {x: 0, y: 0};
		var rect = {x: basePoint.x, y: basePoint.y, width: 630, height: 460};
		g.add(createBackground(rect));
		g.add(createHomeButton(app, rect));
		g.add(createLoupeButton(rect));
		g.add(createShowPlaceButton(rect));
		g.add(createSkipButton(rect));
		g.add(createTimer(rect));
		createBonusIndicator(rect, g);
		g.add(createPhoto(rect));
		var stage = new Kinetic.Stage({
	        container: 'levelPage',
	        x: position.x,
	        y: position.y,
	        width: position.x + size.width,
	        height: position.y + size.height
	    });
	    stage.add(g);
		return stage;
	};
	function createBackground (pageRect) {
		return new Kinetic.Rect({
			x: pageRect.x,
			y: pageRect.y,
			fill: 'A4CF65',
			width: pageRect.width,
			height: pageRect.height,
		});
	}
	function createHomeButton (app, pageRect) {
		var x = pageRect.x + 20;
		var y = pageRect.y + pageRect.height - 60;
		var b = createButton(x, y, 80, 40, 'Домой');
		b.on('click', function () {
			app.moveToTop('firstPage');
		});
		return b;
	}
	function createLoupeButton (pageRect) {
		var x = pageRect.x + 200;
		var y = pageRect.y + pageRect.height - 60;
		var b = createButton(x, y, 65, 40, 'Лупа');
		return b;
	}
	function createShowPlaceButton (pageRect) {
		var x = pageRect.x + 300;
		var y = pageRect.y + pageRect.height - 60;
		var b = createButton(x, y, 115, 40, 'Подсказка');
		return b;
	}
	function createSkipButton (pageRect) {
		var x = pageRect.x + 450;
		var y = pageRect.y + pageRect.height - 60;
		var b = createButton(x, y, 125, 40, 'Пропустить');
		return b;
	}
	function createTimer (pageRect) {
		return createText(pageRect.x + 20, pageRect.y + pageRect.height - 120, 45, '00:12');
	}
	function createBonusIndicator (pageRect, layer) {
		var imageObj = new Image();
		var img;
		imageObj.onload = function () {
			img = new Kinetic.Image({
	  			x: pageRect.x + 160,
	  			y: pageRect.y + pageRect.height - 120,
	  			image: imageObj,
	  			width: 100,
	  			height: 50
	  		});
	  		layer.add(img);
	  		layer.draw();
		};
		imageObj.src = 'images/bonusIndicator.png';
		return img;
	}
	function createPhoto (pageRect) {
		var imageObj = new Image();
		imageObj.src = 'images/photo.jpg';
		var img = new Kinetic.Image({
  			x: pageRect.x + 20,
  			y: pageRect.y + 20,
  			image: imageObj,
  			width: pageRect.width - 40,
  			height: pageRect.height - 150
  		});
	   	return img;
	}

	function addRandomCoin(layer) {
		var coinPoint = randomPoint({
	  		left: 60, 
	  		right: 488, 
	  		up: 70, 
	  		bottom: 300
	  	});
	  	addCoin(layer, coinPoint.x, coinPoint.y);
	}
	function randomPoint (bounds) {
		return { 
			x: Math.random() * (bounds.right - bounds.left) + bounds.left, 
			y: Math.random() * (bounds.bottom - bounds.up) + bounds.up
		};
	}
	function createScoreCounter(layer) {
		var complexText = new Kinetic.Text({
			x: 10,
			y: 10,
			text: 'Score: ',
			fontSize: 18,
			fontFamily: 'Calibri',
			fill: '#555',
			width: 200,
			padding: 10,
			align: 'left'
		});
		var score = new Kinetic.Text({
			x: 60,
			y: 10,
			text: '99990',
			fontSize: 18,
			fontFamily: 'Calibri',
			fill: '#555',
			width: 200,
			padding: 10,
			align: 'left',
			id: 'score'
		});
		var rect = new Kinetic.Rect({
			x: 10,
			y: 10,
			stroke: '#555',
			strokeWidth: 5,
			fill: '#ddd',
			width: 200,
			height: complexText.getHeight(),
			shadowColor: 'black',
			shadowBlur: 10,
			shadowOffset: [10, 10],
			shadowOpacity: 0.2,
			cornerRadius: 10
		});
		layer.add(rect);
		layer.add(complexText);
		layer.add(score);
	}

	function createButton (x, y, width, height, text) {
		var button = new Kinetic.Group();
		button.add(createRect(x, y, width, height));
		button.add(createText(x, y, 20, text));
		button.on('mouseover', function() {
			document.body.style.cursor = 'pointer';
		});
		button.on('mouseout', function() { document.body.style.cursor = 'default'; });
		return button;
	}
	function createRect (x, y, width, height) {
		return window.EngineWrapper.rect(x, y, width, height);
	}
	function createText (x, y, fontSize, text) {
		var el = new Kinetic.Text({
			x: x,
			y: y,
			text: text,
			fontSize: fontSize,
			fill: '#555',
			padding: 10,
			align: 'center'
		});
		return el;
	}})();